import YYG from "../components/8-QQMusic/YYG";
import MineMusic from "../components/8-QQMusic/MineMusic";
import {lazy, Suspense} from 'react';
import { Navigate } from "react-router-dom";
//1. 导入 lazy  Suspense 

//2. 使用 lazy + import 导入模块
let HeroDetail = lazy(() => import('../components/9-路由组件传参/HeroDetail/HeroDetail'));
let Singer = lazy(() => import("../components/8-QQMusic/Singer"));
let Hero = lazy(() => import("../components/9-路由组件传参/HeroList/Hero"));
let Song = lazy(() => import("../components/8-QQMusic/Song")) ;
let NotFound = lazy(() => import("../components/7-路由体验/NotFound")) ;

function load(Comp){
  return <Suspense fallback={<div>加载中....</div>}><Comp /></Suspense>
}

//声明一个变量
let routes = [
  {
    path: '/home',
    element: <YYG  />,
    children: [
      {
        path: '/home/song',
        element: load(Song)
      },
      {
        path: '/home/singer',
        element: load(Singer)
      },
      {
        index: true,
        element: <Navigate to="/home/song" />
      }
    ]
  },
  {
    path: '/mine',
    element: <MineMusic  />
  },
  {
    path: '*',
    element: load(NotFound)
  },
  {
    path: '/heros',
    element: load(Hero)
  },
  {
    path: '/hero', // app.get('/:id.html', (req, res) => {})
    //3. 使用 Suspense 组件包裹路由组件
    element: load(HeroDetail)
  }
]

export default routes;